Dynamic Drive DHTML Scripts- Tab Menu

FF1+ IE5+ Opr7+

Tab Menu

Note: Updated Oct 4th, 05' for persistence (remember last tab selected) feature.

Description: This is an attractive, list based tab menu script. While the menu requires a JavaScript enabled browser to view properly, the menu content is simply regular HTML, making content such as links within search engine friendly.

We know you'll have fun with this menu!

Demo:

Products Support About us Download

Product 1 Product 2 Product 3

Phone Email Knowledge base

History The team Contact us Visions

Patches Whitepapers Tab menu Color picker Window scripts Games

Directions

Step 1: Insert the below CSS and script into the HEAD section of your page:

Select All

	<style type="text/css">

	#mainMenu{
		background-color: #FFF;	/* Background color of main menu */
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Fonts of main menu items */
		font-size:1.2em;	/* Font size of main menu items */
		border-bottom:1px solid #000000;	/* Bottom border of main menu */
		height:30px;	/* Height of main menu */		
		position:relative;	/* Don't change this position attribute */
		visibility: hidden;
		
	}
	#mainMenu a{
		padding-left:5px;	/* Spaces at the left of main menu items */
		padding-right:5px;	/* Spaces at the right of main menu items */
		font-weight: bold;
		/* Don't change these two options */
		position:absolute;
		bottom:-1px;
	}
	#submenu{		
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font  of sub menu items */
		background-color:#E2EBED;	/* Background color of sub menu items */
		visibility: hidden;
		width:100%;	/* Don't change this option */
		
	}
	
	html>body #clearmenu{ /* non IE browsers menu bottom spacing */
	margin-bottom: 2px;
	}
	
	#submenu div{
		white-space:nowrap;	/* Don't change this option */
		
	}
	/*
	Style attributes of active menu item 
	*/
	#mainMenu .activeMenuItem{
		/* Border options */
		border-left:1px solid #000000;
		border-top:1px solid #000000;
		border-right:1px solid #000000;		
		background-color: #E2EBED;	/* Background color */
		
		cursor:pointer;	/* Cursor like a hand when the user moves the mouse over the menu item */
	}
	/*
	Style attributes of inactive menu items
	*/
	#mainMenu .inactiveMenuItem{		
		color: #000;	/* Text color */
		cursor:pointer;	/* Cursor like a hand when the user moves the mouse over the menu item */
	}
	
	#submenu a{	
		text-decoration:none;	/* No underline on sub menu items - use text-decoration:underline; if you want the links to be underlined */
		padding-left:5px;	/* Space at the left of each sub menu item */
		padding-right:5px;	/* Space at the right of each sub menu item */
		color: #000;	/* Text color */
	}
	
	#submenu a:hover{
		color: #FF0000;	/* Red color when the user moves the mouse over sub menu items */
	}
	
	</style>
	<script type="text/javascript">

/***********************************************
* Tab Menu- By Alf Magne Kalleland www.dhtmlgoodies.com
* Script featured and available at Dynamic Drive: http://www.dynamicdrive.com/
* This notice must stay intact for use
***********************************************/
		
	var topMenuSpacer = 15; // Horizontal space(pixels) between the main menu items	
	var activateSubOnClick = false; // if true-> Show sub menu items on click, if false, show submenu items onmouseover
	var leftAlignSubItems = false; 	// left align sub items t
	var activeMenuItem = false;	// Don't change this option. It should initially be false
	var activeTabIndex = 0;	// Index of initial active tab	(0 = first tab) - If the value below is set to true, it will override this one.
	var rememberActiveTabByCookie = true;	// Set it to true if you want to be able to save active tab as cookie
	
	/*
	These cookie functions are downloaded from 
	http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
	*/	
	function Get_Cookie(name) { 
	   var start = document.cookie.indexOf(name+"="); 
	   var len = start+name.length+1; 
	   if ((!start) && (name != document.cookie.substring(0,name.length))) return null; 
	   if (start == -1) return null; 
	   var end = document.cookie.indexOf(";",len); 
	   if (end == -1) end = document.cookie.length; 
	   return unescape(document.cookie.substring(len,end)); 
	} 
	// This function has been slightly modified
	function Set_Cookie(name,value,expires,path,domain,secure) { 
		expires = expires * 60*60*24*1000;
		var today = new Date();
		var expires_date = new Date( today.getTime() + (expires) );
	    var cookieString = name + "=" +escape(value) + 
	       ( (expires) ? ";expires=" + expires_date.toGMTString() : "") + 
	       ( (path) ? ";path=" + path : "") + 
	       ( (domain) ? ";domain=" + domain : "") + 
	       ( (secure) ? ";secure" : ""); 
	    document.cookie = cookieString; 
	}	
	
	function showHide()
	{
		if(activeMenuItem){
			activeMenuItem.className = 'inactiveMenuItem'; 	
			var theId = activeMenuItem.id.replace(/[^\d]/g,'');
			document.getElementById('submenu_'+theId).style.display='none';
		}

		
		activeMenuItem = this;		
		this.className = 'activeMenuItem';
		var theId = this.id.replace(/[^\d]/g,'');
		document.getElementById('submenu_'+theId).style.display='block';
		
		if(rememberActiveTabByCookie){
			Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100);
		}
	}
	
	function initMenu()
	{
		var mainMenuObj = document.getElementById('mainMenu');
		var subMenuObj = document.getElementById('submenu'); //DD added line
		mainMenuObj.style.visibility=subMenuObj.style.visibility="visible" //DD added line
		var menuItems = mainMenuObj.getElementsByTagName('A');
		if(document.all){
			mainMenuObj.style.visibility = 'hidden';
			document.getElementById('submenu').style.visibility='hidden';
		}		
		if(rememberActiveTabByCookie){
			var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + '';
			cookieValue = cookieValue.replace(/[^\d]/g,'');
			if(cookieValue.length>0 && cookieValue<menuItems.length){
				activeTabIndex = cookieValue/1;
			}			
		}
		
		var currentLeftPos = 15;
		for(var no=0;no<menuItems.length;no++){			
			if(activateSubOnClick)menuItems[no].onclick = showHide; else menuItems[no].onmouseover = showHide;
			menuItems[no].id = 'mainMenuItem' + (no+1);
			menuItems[no].style.left = currentLeftPos + 'px';
			currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer; 
			if(no==activeTabIndex){
				menuItems[no].className='activeMenuItem';
				activeMenuItem = menuItems[no];
			}else menuItems[no].className='inactiveMenuItem';
			if(!document.all)menuItems[no].style.bottom = '-1px';
			
		}		
		
		var mainMenuLinks = mainMenuObj.getElementsByTagName('A');
		
		var subCounter = 1;
		var parentWidth = mainMenuObj.offsetWidth;
		while(document.getElementById('submenu_' + subCounter)){
			var subItem = document.getElementById('submenu_' + subCounter);
			
			if(leftAlignSubItems){
				// No action
			}else{							
				var leftPos = mainMenuLinks[subCounter-1].offsetLeft;
				document.getElementById('submenu_'+subCounter).style.paddingLeft =  leftPos + 'px';
				subItem.style.position ='absolute';
				if(subItem.offsetWidth > parentWidth){
					leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth); 	
				}
				subItem.style.paddingLeft =  leftPos + 'px';
				subItem.style.position ='static';
					
				
			}
			if(subCounter==(activeTabIndex+1)){
				subItem.style.display='block';
			}else{
				subItem.style.display='none';
			}
			
			subCounter++;
		}
		if(document.all){
			mainMenuObj.style.visibility = 'visible';
			document.getElementById('submenu').style.visibility='visible';
		}		
		document.getElementById('submenu').style.display='block';
	}
	window.onload = initMenu;	
	</script>

The CSS above allows you to control all visual aspects of the tab menu and content in one central location. A variable within the DHTML script also lets you specify which tab and content should be initially selected when the page loads.

Step 2: Add the below HTML to where you wish the tab menu to appear on the page:

Select All

<!-- This is the start of the menu -->
<div id="mainMenu">
	<a>Products</a>
	<a>Support</a>
	<a>About us</a>
	<a>Download</a>
</div>
<div id="submenu">
	<!-- The first sub menu -->
	<div id="submenu_1">
		<a href="http://www.dynamicdrive.com">Product 1</a>
		<a href="http://www.dynamicdrive.com">Product 2</a>
		<a href="http://www.dynamicdrive.com">Product 3</a>
	</div>
	<!-- Second sub menu -->
	<div id="submenu_2">
		<a href="http://www.dynamicdrive.com">Phone</a>
		<a href="http://www.dynamicdrive.com">Email</a>
		<a href="http://www.dynamicdrive.com">Knowledge base</a>
	</div>
	<!-- Third sub menu -->
	<div id="submenu_3">
		<a href="http://www.dynamicdrive.com">History</a>
		<a href="http://www.dynamicdrive.com">The team</a>
		<a href="http://www.dynamicdrive.com">Contact us</a>
		<a href="http://www.dynamicdrive.com">Visions</a>
	</div>
	<!-- Fourth sub menu -->
	<div id="submenu_4">
		<a href="http://www.dynamicdrive.com">Patches</a>
		<a href="http://www.dynamicdrive.com">Whitepapers</a>
		<a href="http://www.dynamicdrive.com">Tab menu</a>
		<a href="http://www.dynamicdrive.com">Color picker</a>
		<a href="http://www.dynamicdrive.com">Window scripts</a>
		<a href="http://www.dynamicdrive.com">Games</a>

	</div>
</div>
<br id="clearmenu" />

Information regarding doctype

The code above assumes your page uses a valid doctype declaration. If it doesn't, you'll need to make a minor change to the style sheet for the menu to display correctly:

The css rule:

#mainMenu a{
     padding-left:5px; /* Spaces at the left of main menu items */
     padding-right:5px; /* Spaces at the right of main menu items */

     /* Don't change these two options */
     position:absolute;
     bottom:-1px;
}

should be modified to:

#mainMenu a{
     padding-left:5px; /* Spaces at the left of main menu items */
     padding-right:5px; /* Spaces at the right of main menu items */

     /* Don't change these two options */
     position:absolute;
     bottom:-2px;
}

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post